---
title: Assets
order: 1
desc: Use Penpot's asset libraries for reusable design elements! Learn to create, manage, and share components, colors, and typography. Try Penpot - it's free!
---

<h1 id="assets">Assets</h1>
<p class="main-paragraph">Asset Libraries allow you to store elements and styles so that they can be easily reused. Learn how to create and manage them to better organize the pieces of your designs and speed your workflow.</p>

<h2 id="asset-types">Asset types</h2>
<p>In Penpot you can store different type of assets:</p>
<ul>
  <li><strong>Components:</strong> A component is a layer or group of layers that can be reused multiple times across files (projects and teams in the future). Learn more at the <a href="/user-guide/design-systems/components/">components section</a>.</li>
  <li><strong>Colors:</strong> Create your color styles and use them on fills and strokes.</li>
  <li><strong>Typographies:</strong> Penpot allows you to save typography styles with a set of reusable properties. You can always unlink a typography style maintaining the properties for the text layer.</li>
  <li><strong>[Deprecated] Graphics:</strong> In Penpot versions older than 2.0, bitmap and vector images can be stored at the Graphics section. This type was deprecated in favor of components.</li>
</ul>

<h2 id="add-assets-to-library">Add assets to libraries</h2>
<p>You can use the “+” icon to add assets. Each of the categories have their own specific adding action.</p>
<h3>Components</h3>
<p>There are two ways to add components to an assets library:</p>
<ol>
  <li>Main components are automatically stored in the local library at the moment of being created. Learn more about components at the <a href="/user-guide/design-systems/components/">components section</a>.</li>
  <li>Clicking the “+” to launch import an image that will be added as a component.</li>
</ol>
<figure>
  <video title="Add component" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/add-component.webp" height="auto">
    <source src="/img/libraries/add-component.mp4" type="video/mp4">
  </video>
</figure>
<h3>Colors</h3>
<p>Click the “+” to launch the color picker and add a color to the library. Learn more about <a href="/user-guide/designing/color-stroke/#fill">managing color</a></p>
<figure>
  <video title="Add color" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/add-color.webp" height="auto">
    <source src="/img/libraries/add-color.mp4" type="video/mp4">
  </video>
</figure>
<h3>Typographies</h3>
<p>All typography styles created from the text properties (at the right sidebar) are automatically stored at the library. You can also click the “+” to create a new typography style from scratch.</p>
<figure>
  <video title="Add typography" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/add-typography.webp" height="auto">
    <source src="/img/libraries/add-typography.mp4" type="video/mp4">
  </video>
</figure>
<p><strong>Tip:</strong> If you select a text layer with certain properties (font family, size, line height...) and click the "+" at the Typographies section at the assets library (left sidebar), the created typography style will include the properties of the text layer.</p>

<h2 id="edit-assets">Edit assets</h2>
<p>Press left click over any asset of the library to show the options menu. Some options are available only for certain assets.</p>
<ul>
  <li><strong>Components:</strong> Rename, duplicate, delete, group.</li>
  <li><strong>Colors:</strong> Rename, edit, delete.</li>
  <li><strong>Typographies:</strong> Rename, edit, delete.</li>
</ul>
<figure>
  <video title="Asset options" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-options.webp" height="auto">
    <source src="/img/libraries/asset-options.mp4" type="video/mp4">
  </video>
</figure>

<h2 id="use-assets">Use Assets</h2>
<ul>
  <li><strong>Components:</strong> Drag the component directly from the library to the viewport.</li>
  <li><strong>Colors:</strong> With a shape or a text selected click a color from the library to apply it as a fill. If you press <kbd>Alt</kbd> (or <kbd>⌥</kbd> in macOS) while clicking, the color will be applied to the stroke.</li>
  <li><strong>Typographies:</strong> With a text layer selected click a typography style from the library to apply it.</li>
</ul>
<figure>
  <video title="Asset use" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-use.webp" height="auto">
    <source src="/img/libraries/asset-use.mp4" type="video/mp4">
  </video>
</figure>

<h2 id="organize-assets">Organize assets</h2>
<p>Learn how to better view and organize your assets:</p>

<h3>Assets list views</h3>
<p>You can switch between list and grid views.</p>
<ul>
  <li><strong>Grid view:</strong> With the thumbnails displayed is easier to visually identify the content of specific assets, specially components.</li>
  <li><strong>List view:</strong> Optimized to identify the assets by their names and view more assets at the same time.</li>
</ul>
<figure>
  <video title="Asset list" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-list.webp" height="auto">
    <source src="/img/libraries/asset-list.mp4" type="video/mp4">
  </video>
</figure>

<h3>Sort assets</h3>
<p>Click the sort button to change the alphabetical order.</p>
<figure>
  <video title="Asset sort" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-order.webp" height="auto">
    <source src="/img/libraries/asset-order.mp4" type="video/mp4">
  </video>
</figure>

<h3>Search assets</h3>
<p>Use the Search assets box to filter the assets with names that match what you write.</p>
<figure>
  <video title="Asset search" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-search.webp" height="auto">
    <source src="/img/libraries/asset-search.mp4" type="video/mp4">
  </video>
</figure>

<h3>Filter assets</h3>
<p>You can decide whether to show all asset types or only one of your choice (components, colors or typographies).</p>

<h3>Multiselect assets</h3>
<figure>
  <video title="Asset search" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-multiselect.webp" height="auto">
    <source src="/img/libraries/asset-multiselect.mp4" type="video/mp4">
  </video>
</figure>

<h3>Group assets</h3>
<p>There are two ways to create groups in a library.</p>
<ol>
  <li><strong>With slashes (/):</strong> Select an asset and rename it as follows: "FOLDER NAME/ASSET NAME". For example, "Buttons/Alert Button".</li>
  <li><strong>With the "Group" option:</strong> Select one or more assets at the library, then right click to show the menu and then select "Group".</li>
</ol>
<figure>
  <video title="Grouping components" muted="" playsinline="" controls="" width="100%" poster="/img/components/components-group.webp" height="auto">
    <source src="/img/components/components-group.mp4" type="video/mp4">
  </video>
</figure>

<h3>Ungroup assets</h3>
<p>You can ungroup the assets the same ways you can group them, via the menu option ("Ungroup" in this case) or renaming them.</p>

<h3>Drag assets to groups</h3>
<p>One very direct way to move assets between groups at the libraries is by dragging them.</p>
<figure>
  <video title="Drag components" muted="" playsinline="" controls="" width="auto" poster="/img/components/components-drag.webp" height="auto">
    <source src="/img/components/components-drag.mp4" type="video/mp4">
  </video>
</figure>


